import React, { useMemo } from 'react'

import { useModel,useSelector,useDispatch} from 'umi'

export default function Goods() {
  React.useEffect(()=>{
    dispatch({
      type:"catdva/getData"
    })
  },[]);
  // const {list,changeCheck,changnum,del,total}=useModel("cat")
  const list=useSelector((state:any)=>{
    console.log("state",state)
    return state.catdva.list
})
  const dispatch=useDispatch()
  const total =  React.useMemo(()=>{
  
    let t = 0;
    list.filter((item:any)=>item.checked).forEach((item:any)=>{
        t += item.price * item.num;
    })
    return t;
  },[list]);

  return (
    <div>
        <table>
          <thead>
            <tr>
              <td><input type="checkbox" /></td>
              <td>名字</td>
              <td>价格</td>
              <td>数量</td>
              <td>小计</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody>
              {list.map((item:any)=>{

                return  <tr key={item.id}>
                <td><input onChange={
                  ()=>dispatch({
                    type:"catdva/checkinput",
                    payload:item.id
                  })} 
                checked={item.checked} type="checkbox" /></td>
                <td>{item.name}</td>
                <td>{item.price}</td>
                <td><button disabled={item.num==1} onClick={()=>dispatch({
                    type:"catdva/changeNum",
                    payload:{id:item.id,n:-1}
                  })}>-</button>{item.num}<button onClick={()=>dispatch({
                    type:"catdva/changeNum",
                    payload:{id:item.id,n:1}
                  })}>+</button></td>
                <td>{item.price*item.num}</td>
                <td><button onClick={()=>dispatch({
                    type:"catdva/del",
                    payload:item.id
                  })}>删除</button></td>
          
                </tr>   

              })}


             


          </tbody>


        </table>
            
          总计：{total}



    </div>
  )
}
